<template>
  <div class="swiper-fathers" :id="compoyNext">
    <div v-swiper:mySwiper="swiperOption" class="swiper_banner">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-if="type == 1"
          v-for="(item, index) in list"
          @click="open(item.href)"
          :key="index"
        >
          <div class="banner_swiper" v-if="type == 1">
            <div class="img_wap">
              <img :src="item.tpic" alt="" />
            </div>
            <p class="swiepr_title title_color">{{ item.name }}</p>
          </div>
        </div>
        <div
          class="swiper-slide"
          v-if="type == 4"
          v-for="(item, index) in list"
          @click="open(item.href)"
          :key="index"
        >
          <div class="banner_swiper banner_swipers" v-if="type == 4">
            <div class="zhizhao">
              <img :src="item.tpic" alt="" />
            </div>
          </div>
        </div>
        <div
          class="swiper-slide"
          v-for="(i, b) in sizeNum"
          v-if="type == 3"
          :key="b"
        >
          <div class="banner_swiper" v-if="type == 2">
            <div class="s_flex s_align_items s_flex-wrap">
              <div
                class="swiper_items swiper_items_prize"
                v-for="(item, index) in list"
                :key="item.id"
              >
                <div class="swiper_items_box">
                  <img
                    src="@/assets/bg.jpg"
                    alt=""
                    v-if="item.prize_type == '优秀奖'"
                  />
                  <img
                    src="@/assets/bg1.jpg"
                    alt=""
                    v-if="item.prize_type == '金奖'"
                  />
                  <img
                    src="@/assets/bg2.jpg"
                    alt=""
                    v-if="item.prize_type == '银奖'"
                  />
                  <div class="swiper_items_box_info">
                    <p class="title">
                      {{ item.name }}
                    </p>
                    <p class="prize">{{ item.prize }} {{ item.prize_type }}</p>
                    <p class="item_line"></p>
                    <p class="number">{{ item.ano }}</p>
                    <p class="number">{{ item.company }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="banner_swiper" v-if="type == 3">
            <div class="s_flex s_align_items s_flex-wrap">
              <div
                class="swiper_items swiper_items_compy"
                v-for="(item, index) in list"
                :key="item.id"
              >
                <div class="trademar">
                  <img :src="item.tpic" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div
            class="swiper-slide"
            v-if="type == 5"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="s_flex s_justify_content_between s_align_items_center">
              <div class="bs_item ft_weight_800">
                <img :src="item.tpic" alt="" />
                <p class="sq_tilte3">{{ item.name }}</p>
              </div>
            </div>
          </div>
        </div>
        <div
          class="swiper-slide"
          v-if="type == 5"
          v-for="(item, index) in list"
          @click="open(item.href)"
          :key="index"
        >
          <div class="s_flex s_justify_content_between s_align_items_center">
            <div class="bs_item ft_weight_800">
              <img :src="item.tpic" alt="" />
              <p class="sq_tilte3">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="swiper-pagination" v-if="type != 3"></div> -->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
    </div>
    <!-- <div class="swiper-button-prev" v-if="!navprev"></div>
    <div class="swiper-button-next" v-if="!navprev"></div> -->
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
export default {
  props: ["list", "type", "PerView", "navprev", "compoyNext", "sizeNum"],
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  watch: {
    PerView: function (o, v) {
      // console.log(o, v, 999);
    },
  },
  data() {
    return {
      swiperOption: {
        // 分页器配置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: `#${this.compoyNext} .swiper-button-next`,
          prevEl: `#${this.compoyNext} .swiper-button-prev`,
        },
        // 设定初始化时slide的索引
        initialSlide: 0,
        direction: "horizontal",
        // autoplay: {
        //   delay: 3000,
        //   disableOnInteraction: true,
        // },
        autoplay: document.documentElement.clientWidth <= 750 ? {
          delay: 3000,
          disableOnInteraction: true,
        }:false,
        // 环状轮播
        loop: true,
        slidesPerView: "auto",
        loopedSlides:
          document.documentElement.clientWidth <= 750 ? 1 : this.PerView,
        loopAdditionalSlides: 0,
        slidesPerView:
          document.documentElement.clientWidth <= 750 ? 1 : this.PerView,
        spaceBetween: 30,
        // 修改swiper自己或子元素时，自动初始化swiper
        observer: true,
        // 修改swiper的父元素时，自动初始化swiper
        observeParents: true,
      },
    };
  },
  methods: {
    open(url) {
      if (url) {
        window.open(url);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.banner_swiper {
  // padding: 50px 0;
}
.swiper_banner {
  width: 1200px;
  margin: 0 auto;
}
.swiper_box {
  background: #fff;
  padding: 80px 0;
}
.swiper_box .compoy {
  text-align: center;
}
.swiper-fathers {
  width: 100%;
  position: relative;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 0;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 0;
}

.swiper_items {
  width: calc(100% / 4 - 30px);
  margin: 0 auto 40px;
  .swiper_items_box {
    position: relative;
    img {
      width: 100%;
    }
    .swiper_items_box_info {
      width: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      .title {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 10px;
      }
      .prize {
        font-size: 18px;
        font-weight: 400;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .number {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
      }
      .item_line {
        width: 100%;
        height: 2px;
        background: #fff;
        margin: 5px 0;
      }
    }
  }
}
.trademar {
  width: 200px;
  margin: 0 auto;
  img {
    width: 100%;
  }
}
.zhizhao {
  width: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.swiepr_title {
  text-align: center;
}
.banner_swipers {
  // padding: 25px 0;
}
.show-doc {
  background: #fbfdff;
  box-shadow: 0px 5px 20px 0px rgba(86, 152, 190, 0.3);
  padding: 30px 0;
}
.bs_sesion {
  position: relative;
  .bs_box {
    position: absolute;
    width: 1200px;
    top: -50%;
    .bs_item {
      width: 100%;
      background: #ffffff;
      box-shadow: 3px 1px 21px 0px rgba(24, 76, 171, 0.26);
      padding: 30px 0;
      img {
        width: 188px;
        height: 125px;
        object-fit: contain;
        margin: 0 auto;
      }
      p {
        text-align: center;
        margin-top: 20px;
      }
    }
  }
}
@media (max-width: 750px) {
  .swiper_items_compy {
    width: 45%;
    margin: 0 auto 20px;
  }
  .swiper_items_prize {
    width: 100%;
  }
  .swiper_banner{
    width: 100%;
    margin: 0 auto;
  }
  .bs_sesion .bs_box .bs_item{
    width: 90%;
    margin: 0 auto;
  }
}
</style>